<!DOCTYPE html>
<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>float-练习</title>
</head>
<style>
    /*设置第一个div的宽和高(宽为屏幕宽度，高为当前界面高度)*/
    .all {
        min-width: 450px;
        width: 100%;
        height: 100vh;
        background-color: gray;
    }

    /*设置了header这一行的高度(父元素的10%：也就是all的10%)
    以及class=header这div中的元素居中，前提是里面的div必须是行内块元素或者行内元素*/
    .header {
        height: 10%;
        /*background-color: skyblue;*/
        text-align: center;
        margin-bottom: 5px;
    }

    /*高度为.header的100%,将类名为herder的div中的三个div设置为行内块元素*/
    .First_line {
        height: 100%;
        background-color: yellowgreen;
        display: inline-block;
    }

    /*宽度为父亲当前宽度的20%*/
    .logo {
        width: 20%;
        float: left;
    }

    /*宽度为父亲当前宽度的50%，并且左右边距为10px*/
    .banner1 {
        width: 50%;
        margin: 0 10px;
    }

    .banner2 {
        width: 20%;
        float: right;
    }

    /*将.header 中的 span元素的宽度设置为他父亲宽度的100%、高度也是100%
    然后将span设置为弹性盒子，在设置span中的内容水平和垂直居中*/
    .header span {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /*将菜单行的高度设置为父亲当前高度的3%，并且其中的元素居中(其中只能是行内元素和行内块元素)*/
    .menu {
        background-color: yellowgreen;
        height: 3%;
        text-align: center;
    }

    .content {
        margin: 5px 0;
        height: 40%;
        /*background-color: pink;*/
    }

    .project_1-6 {
        height: 100%;
        width: 80%;
        float: left;
    }

    .project {
        height: 100%;
        width: 49%;
        /*background-color: skyblue;*/
        display: inline-block;
        margin-right: 2px;
        float: left;
    }

    .project_1 {
        margin-bottom: 6px;
        background-color: cadetblue;
        height: 49%;
    }

    .content span {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .project_2 {
        /*background-color: burlywood;*/
        height: 49%;
        width: 100%;
        margin-top: 5px;
    }

    .project_2_content {
        background-color: lightcyan;
        display: inline-block;
        height: 100%;
        width: 49%;
    }

    .project_7-9 {
        height: 100%;
        width: 20%;
        float: left;
    }

    .project_7-9_content {
        width: 100%;
        height: 32.2%;
        background-color: yellowgreen;
    }

    .project_7-9_content-1, .project_7-9_content-2 {
        margin-bottom: 5px;
    }

    .foot {
        width: 100%;
        height: 5%;
        background-color: pink;
    }

    .foot span {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div class="all">
    <div class="header">
        <div class="First_line logo">
            <span>logo</span>
        </div>
        <div class="First_line banner1">
            <span>banner1</span>
        </div>
        <div class="First_line banner2">
            <span>banner2</span>
        </div>
    </div>
    <div class="menu">菜单</div>
    <div class="content">
        <div class="project_1-6">
            <div class="project">
                <div class="project_1"><span>栏目一</span></div>
                <div class="project_2">
                    <div class="project_2_content"><span>栏目三</span></div>
                    <div class="project_2_content"><span>栏目四</span></div>
                </div>
            </div>
            <div class="project">
                <div class="project_1"><span>栏目二</span></div>
                <div class="project_2">
                    <div class="project_2_content"><span>栏目五</span></div>
                    <div class="project_2_content"><span>栏目六</span></div>
                </div>
            </div>
        </div>
        <div class="project_7-9">
            <div class="project_7-9_content project_7-9_content-1"><span>4684</span></div>
            <div class="project_7-9_content project_7-9_content-2"><span>4684</span></div>
            <div class="project_7-9_content project_7-9_content-3"><span>4684</span></div>
        </div>
    </div>
    <div class="foot"><span>页脚</span></div>
</div>
</body>
</html>